<template>
    <div>
        <div class="container">
            <span class="text-left" v-text="textLeft"></span>
            <input class="edit-right" v-model="inputText" :placeholder="textHint"/>
            <img :src="scanImg" class="scan" @click="sys_click()"/>
        </div>
    </div>
</template>

<script type="text/ecmascript-6">
    import wx from 'weixin-js-sdk';

    export default {
        name: 'cell-scan-text',

        data() {
            return {
                inputText: this.textDefault,
                scanImg: `${this.$Public.iconImg}scan_code.svg`
            };
        },
        props: {
            textLeft: {
                type: String,
                required: true,
                default: 'text-left-required!!!'
            },
            textDefault: {
                type: String,
                default: null
            },
            textHint: {
                type: String,
                default: null
            }
        },
        created() {
        },
        methods: {
            sys_click() {
                let data = {
                    request_uri: window.location.href
                };
                let _this = this;
                this.$Index.getAppId(data).then(res => {
                    wx.config({
                        debug: false,
                        appId: res.appId,
                        timestamp: res.timestamp,
                        nonceStr: res.nonceStr,
                        signature: res.signature,
                        jsApiList: ['checkJsApi', 'scanQRCode']
                    });
                    wx.error(function (res) {
                        alert('出错了：' + res.errMsg);
                    });
                    wx.ready(function () {
                        wx.checkJsApi({
                            jsApiList: ['scanQRCode'],
                            success: function (res) {

                            }
                        });
                        wx.scanQRCode({
                            needResult: 1, // 默认为0，扫描结果由微信处理，1则直接返回扫描结果，
                            scanType: ['qrCode', 'barCode'], // 可以指定扫二维码还是一维码，默认二者都有
                            success: function (res) {
                                let result = res.resultStr;
                                if (result.indexOf(',') >= 0) {
                                    _this.inputText = result.split(',')[1];
                                } else if (result.slice(0, 4)) {
                                    _this.inputText = '';
                                    _this.$toast({
                                        message: '出错了，请重新扫描！',
                                        duration: 1500
                                    });
                                } else {
                                    _this.inputText = result;
                                }
                            }
                        });
                    });
                });
            }
        },
        watch: {
            inputText() {
                this.$emit('getText', this.inputText);
            }
        }
    };
</script>

<style lang="stylus" rel="stylesheet/stylus" scoped>
    @import "../../assets/stylus/main.styl";
    .scan {
        width: 5vw;
        height: 5vw;
    }

    .container
        display flex
        justify-content space-between
        align-items center
        background white
        height cell-height
        width 100vw
        line-height cell-height
        padding: 0 4vw 0 2vw;
        box-sizing: border-box;

    .text-left
        margin-left cell-margin \
        width 20vw
        word-main()

    .expand
        flex 1

    .edit-right
        text-align left
        margin-right cell-margin
        height cell-height
        line-height cell-height
        width 60vw
        word-main()

    ::-webkit-input-placeholder
        word-vw(12px, third-ash)

    :-moz-placeholder
        word-vw(12px, third-ash)

    ::-moz-placeholder
        word-vw(12px, third-ash)

    :-ms-input-placeholder
        word-vw(12px, third-ash)

</style>
